{% extends "base.html" %}

{% block title %}AI分析功能 - {{ app_name }}{% endblock %}

{% block page_title %}AI分析功能{% endblock %}

{% block page_subtitle %}管理和配置AI分析功能{% endblock %}

{% block extra_css %}
<!-- 引入模块化CSS -->
<link rel="stylesheet" href="/static/css/pages/ai-analysis.css">
{% endblock %}

{% block content %}
<div class="fade-in">
    <!-- 标签页导航 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 mb-6">
        <div class="flex space-x-1 p-1">
            <button class="tab active flex-1 py-3 px-4 rounded-lg font-medium" data-tab="datasource">
                <i class="fas fa-database mr-2"></i>信访数据源
            </button>
            <button class="tab flex-1 py-3 px-4 rounded-lg font-medium" data-tab="analysis">
                <i class="fas fa-brain mr-2"></i>信访分析
            </button>
            <button class="tab flex-1 py-3 px-4 rounded-lg font-medium" data-tab="service">
                <i class="fas fa-cogs mr-2"></i>分析任务配置
            </button>
            <button class="tab flex-1 py-3 px-4 rounded-lg font-medium" data-tab="pollution-types">
                <i class="fas fa-tags mr-2"></i>污染类型管理
            </button>
        </div>
    </div>

    <!-- 标签页内容 -->
    <div id="datasourceTab" class="tab-content">
        <!-- 数据源管理页面内容 -->
        {% include "ai-analysis/datasource-tab.html" %}
    </div>

    <div id="analysisTab" class="tab-content hidden">
        <!-- 分析任务页面内容 -->
        {% include "ai-analysis/analysis-tab.html" %}
    </div>


    <div id="serviceTab" class="tab-content hidden">
        <!-- 分析任务配置页面内容 -->
        {% include "ai-analysis/config-tab.html" %}
    </div>

    <div id="pollution-typesTab" class="tab-content hidden">
        <!-- 污染类型管理页面内容 -->
        {% include "ai-analysis/pollution-types-tab.html" %}
    </div>
</div>

<!-- 模态框组件 -->
{% include "ai-analysis/modals.html" %}

<!-- 加载状态 -->
<div id="loadingState" class="hidden">
    <div class="text-center py-12">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
        <p class="mt-2 text-slate-600">正在加载数据...</p>
    </div>
</div>

<!-- 空状态 -->
<div id="emptyState" class="hidden">
    <div class="text-center py-12">
        <i class="fas fa-inbox text-4xl text-slate-300 mb-4"></i>
        <p class="text-slate-500">暂无数据</p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- 引入模块化JavaScript -->
<script src="/static/js/utils/api-service.js?v=20250915_01"></script>
<script src="/static/js/utils/error-handler.js?v=20250915_01"></script>
<script src="/static/js/components/ui/notification-service.js?v=20250915_01"></script>
<script src="/static/js/utils/module-dependency-manager.js?v=20250915_01"></script>
<script src="/static/js/components/tables/preview-table.js?v=20250915_01"></script>
<script src="/static/js/pages/ai-analysis/datasource-manager.js?v=20250915_01"></script>
<script src="/static/js/pages/ai-analysis/analysis-manager.js?v=20250915_01"></script>
<script src="/static/js/pages/ai-analysis/config-manager.js?v=20250915_01"></script>
<script src="/static/js/pages/ai-analysis/pollution-types-manager.js?v=20250915_10"></script>
<script src="/static/js/pages/ai-analysis/main.js?v=20250915_01"></script>
{% endblock %}